<template>
  <div>
    <el-tabs v-model="isNationalStandard" :stretch="true" @tab-click="handleTabClick">
      <el-tab-pane label="平台" name="0" />
      <el-tab-pane label="标准" name="1" />
    </el-tabs>
    <el-input v-model="searchValue" placeholder="请输入字典组名称">
      <template slot="append"><!--v-hasPermission="$P.CREATE_TYPE_GROUP"  :disabled="!$P.hasPermission($P.CREATE_TYPE_GROUP)" -->
        <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增</el-button>
      </template>
    </el-input>
    <el-tree
      ref="tree"
      v-loading="treeLoading"
      class="common-el-tree tree-active"
      :data="treeData"
      :props="defaultTreeProps"
      :accordion="true"
      :highlight-current="true"
      :filter-node-method="onTreeFilter"
      style="margin-top:10px"
      :current-node-key="nodeSelectedKey"
      node-key="id"
      @node-click="handleNodeClick">
      <span slot-scope="{ node,data }" class="custom-tree-node" @mouseenter="onMouseEnter(data)" @mouseleave="onMouseLeave(data)">
        <i class="el-icon-notebook-2" />
        <span class="text">{{ node.label }}</span>
        <span v-if="!hideOptionMenu && node.data.edit">
          <button-option icon="el-icon-edit" skin="primary" title="编辑" @click="handleUpdate(node.data.id)" />
          <button-option icon="el-icon-delete" skin="danger" title="删除" @click="handleRemove(node.data.id)" />
        </span>
      </span>
    </el-tree>
  </div>
</template>
<script>
export default {
  props: {
    hideOptionMenu: { type: Boolean, default: true }// 隐藏操作按钮
  },
  data() {
    return {
      nodeSelectedKey: '',
      defaultTreeProps: {
        children: 'children',
        label: 'dataDictName',
        isLeaf: 'leaf'
      },
      searchValue: '',
      treeData: [],
      treeLoading: false,
      isNationalStandard: '0'
    }
  },
  watch: {
    searchValue(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {},
  created() {
    this.initTreeNode()
  },
  methods: {
    handleTabClick() {
      this.searchValue = ''
      this.initTreeNode()
    },
    // 删除节点
    handleRemove(id) {
      this.$emit('handleRemove', id)
    },
    handleCreate() {
      this.$emit('handleCreate')
    },
    async handleUpdate(id) {
      const response = await this.$store.dispatch('dataDictGet', { id: id })
      this.$emit('handleUpdate', response)
    },

    async initTreeNode() {
      const response = await this.$store.dispatch('listDataDict', { isNationalStandard: this.isNationalStandard })
      this.treeData = response
      if (this.treeData.length > 0) {
        this.nodeSelectedKey = this.treeData[0].id
        this.$emit('currentSelected', {
          id: this.treeData[0].id,
          code: this.treeData[0].dataDictCode,
          name: this.treeData[0].dataDictName
        })
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.treeData[0].id)
        })
      } else {
        this.$emit('currentSelected', { })
      }
    },
    handleNodeClick(data) {
      this.nodeSelectedKey = data.id
      this.$refs.tree.setCurrentKey(data.id)
      this.$emit('currentSelected', {
        id: data.id,
        code: data.dataDictCode,
        name: data.dataDictName
      })
    },

    /* 节点过滤函数 */
    onTreeFilter(value, data) {
      if (!value) return true
      return data[this.defaultTreeProps.filter]
        ? data[this.defaultTreeProps.label].indexOf(value) !== -1 ||
            data[this.defaultTreeProps.filter].indexOf(value.toUpperCase()) !==
              -1
        : data[this.defaultTreeProps.label].indexOf(value) !== -1
    },
    onMouseEnter(data) {
      this.$set(data, 'edit', true)
    },
    onMouseLeave(data) {
      this.$set(data, 'edit', false)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
